<template>
	<view class="container">
		<canvas canvas-id="chessboard" style="width: 100%;height: 100%;" @click="handleCanvasClick"></canvas>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 屏幕宽高
				screenWidth: 0,
				screenHeight: 0,
				// 适合宽高
				rectWidth: 0,
				rectHeight: 0,
				selectedPiece: null, // 选择的棋子
				pieces: [
					// 红方棋子
					{
						"color": "red",
						"type": "car",
						"x": 0,
						"y": 0,
						name: '车'
					}, // 车
					{
						"color": "red",
						"type": "horse",
						"x": 1,
						"y": 0,
						name: '马'
					}, // 马
					{
						"color": "red",
						"type": "elephant",
						"x": 2,
						"y": 0,
						name: '相'
					}, // 相
					{
						"color": "red",
						"type": "guard",
						"x": 3,
						"y": 0,
						name: '士'
					}, // 士
					{
						"color": "red",
						"type": "king",
						"x": 4,
						"y": 0,
						name: '将'
					}, // 将
					{
						"color": "red",
						"type": "guard",
						"x": 5,
						"y": 0,
						name: '士'
					}, // 士
					{
						"color": "red",
						"type": "elephant",
						"x": 6,
						"y": 0,
						name: '相'
					}, // 相
					{
						"color": "red",
						"type": "horse",
						"x": 7,
						"y": 0,
						name: '马'
					}, // 马
					{
						"color": "red",
						"type": "car",
						"x": 8,
						"y": 0,
						name: '车'
					}, // 车
					{
						"color": "red",
						"type": "cannon",
						"x": 1,
						"y": 2,
						name: '炮'
					}, // 炮
					{
						"color": "red",
						"type": "cannon",
						"x": 7,
						"y": 2,
						name: '炮'
					}, // 炮
					{
						"color": "red",
						"type": "soldier",
						"x": 0,
						"y": 3,
						name: '兵'
					}, // 兵
					{
						"color": "red",
						"type": "soldier",
						"x": 2,
						"y": 3,
						name: '兵'
					}, // 兵
					{
						"color": "red",
						"type": "soldier",
						"x": 4,
						"y": 3,
						name: '兵'
					}, // 兵
					{
						"color": "red",
						"type": "soldier",
						"x": 6,
						"y": 3,
						name: '兵'
					}, // 兵
					{
						"color": "red",
						"type": "soldier",
						"x": 8,
						"y": 3,
						name: '兵'
					}, // 兵

					// 黑方棋子
					{
						"color": "black",
						"type": "car",
						"x": 0,
						"y": 9,
						name: '车'
					}, // 车
					{
						"color": "black",
						"type": "horse",
						"x": 1,
						"y": 9,
						name: '马'
					}, // 马
					{
						"color": "black",
						"type": "elephant",
						"x": 2,
						"y": 9,
						name: '相'
					}, // 相
					{
						"color": "black",
						"type": "guard",
						"x": 3,
						"y": 9,
						name: '士'
					}, // 士
					{
						"color": "black",
						"type": "king",
						"x": 4,
						"y": 9,
						name: '将'
					}, // 将
					{
						"color": "black",
						"type": "guard",
						"x": 5,
						"y": 9,
						name: '士'
					}, // 士
					{
						"color": "black",
						"type": "elephant",
						"x": 6,
						"y": 9,
						name: '相'
					}, // 相
					{
						"color": "black",
						"type": "horse",
						"x": 7,
						"y": 9,
						name: '马'
					}, // 马
					{
						"color": "black",
						"type": "car",
						"x": 8,
						"y": 9,
						name: '车'
					}, // 车
					{
						"color": "black",
						"type": "cannon",
						"x": 1,
						"y": 7,
						name: '炮'
					}, // 炮
					{
						"color": "black",
						"type": "cannon",
						"x": 7,
						"y": 7,
						name: '炮'
					}, // 炮
					{
						"color": "black",
						"type": "soldier",
						"x": 0,
						"y": 6,
						name: '兵'
					}, // 兵
					{
						"color": "black",
						"type": "soldier",
						"x": 2,
						"y": 6,
						name: '兵'
					}, // 兵
					{
						"color": "black",
						"type": "soldier",
						"x": 4,
						"y": 6,
						name: '兵'
					}, // 兵
					{
						"color": "black",
						"type": "soldier",
						"x": 6,
						"y": 6,
						name: '兵'
					}, // 兵
					{
						"color": "black",
						"type": "soldier",
						"x": 8,
						"y": 6,
						name: '兵'
					} // 兵
				]
			}
		},
		methods: {
			handleCanvasClick(event) {
				const centerx = event.detail.x
				const centery = event.detail.y
				if (this.selectedPiece) {
					// 如果已经选择了棋子，尝试移动到新位置
					this.movePiece(centerx, centery);
					this.selectedPiece = null; // 移动后重置选择
				} else {
					// 检查点击是否在棋子上
					this.pieces.forEach(piece => {
						if (Math.abs(centerx - piece.x) <= 15 && Math.abs(centery - piece.y) <= 15) {
							this.selectedPiece = piece; // 选中棋子
							console.log("选择前的棋子", this.selectedPiece);
						}
					});
				}

				this.getCanvas()
			},
			movePiece(centerX, centerY) {
				if (this.selectedPiece) {
					// 更新棋子的位置
					this.selectedPiece.x = Math.floor(centerX / (this.rectWidth / 8)); // 计算目标列
					this.selectedPiece.y = Math.floor(centerY / (this.rectHeight / 9)); // 计算目标行
				}
				console.log("选择后的棋子", this.selectedPiece);
			},
			getCanvas() {
				console.log("绘制图像");
				// 屏幕宽高
				const systemInfo = uni.getSystemInfoSync();
				this.screenWidth = systemInfo.screenWidth; // 屏幕宽度
				this.screenHeight = systemInfo.screenHeight; // 屏幕高度
				// 创建绘图
				const ctx = uni.createCanvasContext('chessboard', this);

				this.rectWidth = Math.min(this.screenWidth - 20); // 计算适合的宽度
				this.rectHeight = Math.min(this.screenHeight / 3);

				this.createBorder(ctx);

				const x = (this.screenWidth - this.rectWidth) / 2; // 矩形 X 坐标居中
				const y = (this.screenHeight - this.rectHeight) / 2; // 矩形 Y 坐标居中

				const width = this.rectWidth - 20;
				const height = this.rectHeight + 10

				// 绘制棋盘背景
				this.drawChessboard(ctx, x + 10, y + 10, width, height); // 绘制棋盘，留出边距


				const rows = 9; // 行数
				const cols = 8; // 列数
				const cellWidth = width / cols; // 每个格子的宽度
				const cellHeight = height / rows; // 每个格子的高度

				this.drawPieces(ctx, x + 10, y + 10, cellWidth, cellHeight);

				// 绘制楚河汉界
				this.drawRiverLine(ctx, x + 10, y + this.rectHeight / 2 - 10, this.rectWidth - 20); // 绘制楚河汉界

				// 绘制图像到页面
				ctx.draw();
			},
			createBorder(ctx) {
				const x = (this.screenWidth - this.rectWidth) / 2; // 矩形 X 坐标居中
				const y = (this.screenHeight - this.rectHeight) / 2; // 矩形 Y 坐标居中

				const radius = 10; // 圆角半径

				ctx.setStrokeStyle('black'); // 边框颜色
				ctx.setLineWidth(5); // 边框宽度

				// 开始路径
				ctx.beginPath();
				ctx.moveTo(x + radius, y); // Move to the top-left corner

				// 绘制上边
				ctx.lineTo(x + this.rectWidth - radius, y);
				// 绘制右上角圆弧
				ctx.arc(x + this.rectWidth - radius, y + radius, radius, 1.5 * Math.PI, 0 * Math.PI);

				// 绘制右边
				ctx.lineTo(x + this.rectWidth, y + this.rectHeight - radius);
				// 绘制右下角圆弧
				ctx.arc(x + this.rectWidth - radius, y + this.rectHeight + 30 - radius, radius, 0 * Math.PI, 0.5 * Math
					.PI);

				// 绘制下边
				ctx.lineTo(x + radius, y + this.rectHeight + 30);
				// 绘制左下角圆弧
				ctx.arc(x + radius, y + this.rectHeight + 30 - radius, radius, 0.5 * Math.PI, Math.PI);

				// 绘制左边
				ctx.lineTo(x, y + radius);
				// 绘制左上角圆弧
				ctx.arc(x + radius, y + radius, radius, Math.PI, 1.5 * Math.PI);

				// 关闭路径并绘制
				ctx.closePath();

				// 填充背景颜色
				ctx.setFillStyle('#E4B97F'); // 设置背景颜色
				ctx.fill(); // 填充背景

				// 绘制边框
				ctx.setStrokeStyle('black'); // 边框颜色
				ctx.setLineWidth(5); // 边框宽度
				ctx.stroke(); // 绘制边框


			},
			drawChessboard(ctx, startX, startY, width, height) {
				const rows = 9; // 行数
				const cols = 8; // 列数
				const cellWidth = width / cols; // 每个格子的宽度
				const cellHeight = height / rows; // 每个格子的高度

				// 绘制横线
				for (let i = 0; i <= rows; i++) {
					ctx.moveTo(startX, startY + i * cellHeight);
					ctx.lineTo(startX + width, startY + i * cellHeight);
				}

				// 绘制竖线
				for (let j = 0; j <= cols; j++) {
					ctx.moveTo(startX + j * cellWidth, startY);
					ctx.lineTo(startX + j * cellWidth, startY + height);
				}

				// 设置线条样式并绘制
				ctx.setStrokeStyle('black');
				ctx.setLineWidth(1);
				ctx.stroke();

				ctx.fillStyle = "#E4B97F";
				// ctx.fillStyle = "red"
				ctx.fillRect(20 + 1, height + 131, width - 2, 29);

				// this.drawPieces(ctx, startX, startY, cellWidth, cellHeight);
			},
			drawRiverLine(ctx, startX, startY, width) {
				/* // 绘制楚河和汉界的两条红线
				ctx.setStrokeStyle('red'); // 设置分界线颜色
				ctx.setLineWidth(2); // 设置分界线宽度 */

				// 上红线
				ctx.beginPath();
				ctx.moveTo(startX, startY + 10);
				ctx.lineTo(startX + width, startY + 10);
				ctx.stroke();

				// 下红线
				ctx.beginPath();
				ctx.moveTo(startX, startY + 40); // 距离第一条线20个像素
				ctx.lineTo(startX + width, startY + 40);
				ctx.stroke();

				// 绘制楚河和汉界的左右边框
				ctx.setLineWidth(2);
				ctx.setStrokeStyle('black');

				// 添加楚河和汉界的文字
				ctx.setFontSize(16);
				ctx.setFillStyle('black');
				ctx.fillText('楚  河                             汉  界', startX + width / 2 - 110, startY +
				32); // 在两条红线之间绘制文字
			},
			drawPieces(ctx, startX, startY, cellWidth, cellHeight) {

				this.pieces.forEach(piece => {
					const centerX = startX + piece.x * cellWidth; // 计算棋子中心 X
					const centerY = startY + piece.y * cellHeight; // 计算棋子中心 Y

					// 绘制阴影
					ctx.shadowOffsetX = 2; // 阴影偏移 X
					ctx.shadowOffsetY = 2; // 阴影偏移 Y
					ctx.shadowBlur = 10; // 阴影模糊程度
					ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 阴影颜色

					ctx.setFillStyle(piece.color); // 设置棋子颜色
					ctx.beginPath();
					ctx.arc(centerX, centerY, 15, 0, Math.PI * 2); // 绘制圆形棋子
					ctx.fill(); // 填充棋子

					// 绘制棋子类型标识（如可以在圆形内添加文字）
					ctx.setFillStyle('white'); // 设置文字颜色为白色
					ctx.setFontSize(12); // 设置字体大小
					ctx.fillText(piece.name, centerX - 5, centerY + 5); // 绘制棋子类型的首字母

					piece.x = centerX
					piece.y = centerY
					// console.log(piece.name +"--------->" + centerX+"--------->" + centerY);

					// 清除阴影设置
					ctx.shadowOffsetX = 0;
					ctx.shadowOffsetY = 0;
					ctx.shadowBlur = 0;
					ctx.shadowColor = 'rgba(0, 0, 0, 0)'; // 清除阴影颜色
				});
			},
		}
	}
</script>
<style lang="scss">
	.container {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		height: 100vh;
		/* 设置容器高度为视口高度，居中 */
	}
</style>